---
title: Utilizando fontes customizadas
description: >-
  Está procurando como adicionar typefaces customizadas a um website Astro?
  Utilize Google Fonts com Fontsource ou adicione uma fonte de sua escolha.
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';


Este guia irá te mostrar como incluir fontes web no seu projeto e utilizar elas em seus componentes.

## Utilizando um arquivo de fonte local

Esse exemplo vai demonstrar como adicionar uma fonte personalizada usando o arquivo de fonte `DistantGalaxy.woff`.

1. Adicione seu arquivo de fonte a `public/fonts/`.
1. Adicione a seguinte declaração `@font-face` ao seu CSS. Isso pode ser num arquivo `.css` global que você importa, em um bloco `<style is:global>` ou em um bloco `<style>` do layout ou componente em que você quer utilizar esta fonte.

    ```css
    /* Registra nossa família de fontes customizada e diz ao navegador aonde encontrá-la. */
    @font-face {
      font-family: 'DistantGalaxy';
      src: url('/fonts/DistantGalaxy.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    ```

1. Utilize o valor `font-family` da declaração `@font-face` para estilizar elementos em seu componente ou layout. Neste exemplo, o título `<h1>` terá a fonte customizada aplicada, enquanto o parágrafo `<p>` não terá.

    ```astro title="src/pages/exemplo.astro" {9-11}
    ---
    ---

    <h1>Em uma galáxia muito, muito distante...</h1>

    <p>Fontes customizadas fazem meus títulos tão mais legais!</p>

    <style>
    h1 {
      font-family: 'DistantGalaxy', sans-serif;
    }
    </style>
    ```

## Utilizando Fontsource

O projeto [Fontsource](https://fontsource.org/) simplifica utilizar Google Fonts e outras fontes open-source. Ele providencia módulos npm que você pode instalar para as fontes que você quer utilizar.

1. Encontre a fonte que você quer utilizar no [catálogo do Fontsource](https://fontsource.org/). Esse exemplo vai usar [Twinkle Star](https://fontsource.org/fonts/twinkle-star).
1. Instale o pacote da sua fonte escolhida.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install @fontsource/twinkle-star
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add @fontsource/twinkle-star
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add @fontsource/twinkle-star
      ```
      </Fragment>
    </PackageManagerTabs>

    :::tip
    Você irá encontrar o nome correto do pacote na seção “Quick Installation” (Instalação Rápida, em Português) da página de cada fonte no website do Fontsource. O nome irá iniciar com `@fontsource/` seguido do nome da fonte.
    :::

1. Importe o pacote da fonte no componente que você quer utilizar a fonte. Geralmente, você vai querer fazer isso em um componente de layout comum para certificar-se de que a fonte está disponível em todo o seu site.

    A importação irá automaticamente adicionar as regras do `@font-face` necessárias para configurar a fonte.

    ```astro title="src/layouts/BaseLayout.astro"
    ---
    import '@fontsource/twinkle-star';
    ---
    ```

1. Utilize o nome da fonte como mostrado no exemplo `body` da página da fonte no Fontsource como o valor `font-family`. Isso irá funcionar em qualquer lugar aonde você pode escrever CSS em seu projeto Astro.

    ```css
    h1 {
      font-family: "Twinkle Star", cursive;
    }
    ```

## Registrar fontes no Tailwind

Se você estiver utilizando a [integração para Tailwind](/pt-br/guides/integrations-guide/tailwind/), você pode ou adicionar uma declaração `@font-face` para uma fonte local ou utilizar a estratégia de `import` do Fontsource para registrar sua fonte.

Para registrar sua fonte no Tailwind:

1. Siga algum dos guias acima, mas pule a etapa final de adicionar `font-family` ao seu CSS.
1. Adicione o nome da typeface em `tailwind.config.mjs`.

    Este exemplo adiciona `InterVariable` e `Inter` a pilha de fontes sans-serif, com as fontes de fallback padrões do Tailwind CSS.

    ```js title="tailwind.config.mjs" ins={1,8-10}
    import defaultTheme from 'tailwindcss/defaultTheme'

    /** @type {import('tailwindcss').Config} */
    export default {
    	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
    	theme: {
    		extend: {
    			fontFamily: {
    				sans: ['Inter', ...defaultTheme.fontFamily.sans],
    			},
    		},
    	},
    	plugins: [],
    }
    ```

    Agora, todo texto sans-serif (o padrão no Tailwind) em seu projeto irá utilizar sua fonte escolhida e a classe `font-sans` também irá aplicar a fonte Inter.

Veja [a documentação do Tailwind em como adicionar famílias de fontes customizadas](https://tailwindcss.com/docs/font-family#using-custom-values) para mais informação.

## Mais recursos

- Aprenda sobre como fontes ad web funcionam no [guia da MDN em fontes web](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts).
- Gere CSS para sua fonte com o [gerador de fontes web da Font Squirrel](https://www.fontsquirrel.com/tools/webfont-generator).
